<template>
  <!-- TODO 下拉刷新组件 -->
  <pull-refresh v-if="viewModel.enablePullDownRefresh === true">测试</pull-refresh>
  <IBizRow v-else :class="classArr" :layout="modelData.layout" ref="contentRef">
    <!-- TODO 回到顶部 -->
    <!-- <view v-if="isScrollable && contentRef"><uni-icons type="arrow-up" size="26"></uni-icons></view> -->
    <template v-for="slotKey in Object.keys($slots)" :key="slotKey">
      <IBizCol :layoutPos="modelData.layoutPos" :state="controller.state">
        <slot :name="slotKey"></slot>
      </IBizCol>
    </template>
  </IBizRow>
</template>
<script setup lang="ts">
import { IPanelContainer } from '@ibiz/model-core'
import { ref, computed, Ref, inject } from 'vue'
import { CTX, SysUIActionTag } from '@ibiz-template/runtime'
import { useRoute } from 'vue-router'
import { useNamespace } from '@/use'
import { PanelContainerController } from '../panel-container/i-biz-panel-container.controller'

const props = defineProps({
  modelData: {
    type: Object as PropType<IPanelContainer>,
    required: true,
  },
  controller: {
    type: PanelContainerController,
    required: true,
  },
})

const ns = useNamespace('view-content')

const isRefreshing = ref(false)

const ctx = inject('ctx') as CTX
const { view } = ctx
const viewModel = view.model
const route = useRoute()

let isScrollable = false
// 嵌入视图不出
if (view.modal.viewUsage === 4) {
  isScrollable = false
} else if (view.modal.viewUsage === 1) {
  // 路由视图得判断是否是首页视图下的视图 或者是 home页下的
  if (
    (view.modal.routeDepth === 1 && view.model.viewType !== 'APPINDEXVIEW') ||
    (view.modal.routeDepth === 2 &&
      (view.parentView?.model?.viewType === 'APPINDEXVIEW' || route.meta.home))
  ) {
    isScrollable = true
  }
  // 模态视图直接出滚动条
} else if (view.modal.viewUsage === 2) {
  isScrollable = true
}

// 调用预置的界面行为刷新界面
const refresh = async () => {
  try {
    isRefreshing.value = true
    await view.call(SysUIActionTag.REFRESH)
  } finally {
    isRefreshing.value = false
  }
}
const { id } = props.modelData
const classArr = computed(() => {
  let result: Array<string | false> = [ns.b(), ns.m(id)]
  result = [
    ...result,
    ...props.controller.containerClass,
    // 只有这个scroll 样式才出滚动条
    ns.is('scroll', isScrollable),
    ns.is('hidden', !props.controller.state.visible),
  ]
  return result
})
const contentRef: Ref<IData | undefined> = ref()
</script>
<style lang="scss">
@import './i-biz-view-content-panel-container';
</style>
